<script setup lang="ts">
import { ref, toRefs,reactive,defineProps } from 'vue'
import Info from './info.vue'

// interface Props{
//     dataList:any
// }
type Props = {
  dataList: any
}
const props = withDefaults(defineProps<Props>(), {
    dataList:[]
})

let dd = reactive(props.dataList)

const showinfo = (data:any)=>{
    console.log(dd)
    dd.info = data.info
}



</script>

<template>
    <div class="contentbanxin">
        <div class="info">
            <div class="leftbar" >
                <div class="title">{{dataList.name}}</div>
                <div class="content-title" v-for="(item1,index) in dataList.list" :key="index">
                    <div class="shubiao" @click="showinfo(item1)">{{item1.title}}</div>
                </div>
            </div>
            <div class="rightcontent">
                <div class="rightbar">
                    <div class="titleimg">
                        <div class="righttitle">{{dataList.name}}</div>
                    </div>
                    <div class="titletag">
                        <div>
                            <span>当前位置：</span>
                            <a href="">{{dataList.name}}</a>
                        </div>
                    </div>
                </div>
                <!-- <div class="rightinfo">
                    初始化
                </div> -->
                <Info :data="dd" :yezujian="dataList"/>
            </div>
        </div>
    </div>
</template>

<style scoped>
a{
    text-decoration: none;
}
.contentbanxin{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    background: #fff;
}
.info{
    width: 1177px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 20px;
    display: flex;
}
.info .leftbar{
    width: 220px;
    float: left;
    background: #00549c;
    height: auto;
}
.title{
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 22px;
    text-align: center;
}
.content-title{
    width: 100%;
    height: 47px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../../static/sl_05.jpg) right no-repeat;
    line-height: 47px;
    font-size: 14px;
}
.info .rightcontent{
    margin-left: 20px;
    width: 930px;
    background: #fff;
    float: right;
    height: auto;
}
.rightbar{
    height: 34px;
    background: url(../../static/sl_25.jpg) bottom repeat-x;
    width: 100%;
}
.rightbar .titleimg{
    min-width: 100px;
    background: url(../../static/sl_19.jpg) 0 12px no-repeat;
    height: 34px;
    float: left;
}
.rightbar .titleimg .righttitle{
    height: 34px;
    line-height: 34px;
    margin-left:10px;
    background: url(../../static/sl_25.jpg) bottom repeat-x;
    width: 100%;
}
.rightbar .titletag{
    font-size: 14px;
    min-width: 50px;
    line-height: 34px;
    text-align: right;
    float: right;
}
.rightcontent .rightinfo{
    font-size: 14px;
    padding: 20px;
    text-indent: 28px;
    width: 95%;
    margin: 0 auto;
    line-height: 35px;
}
.shubiao{
    cursor:pointer;
}
</style>
